<template>
	<view class="confirm_order_page">
		
		<view class="area_order_1">
			<view class="pt32 pb32 bb1 flex_box aic">
				<view class="item ov"><view class="fs32 fwb cor_333 clamp_1">收货信息</view></view>
				<view class="tipe_btn">切换地址/上门自取</view>
			</view>
			<view class="mt32 fs32 fwb cor_333">上门自取（肆维玩家，12345678901）</view>
			<view class="mt15 fs28 cor_666">山东省烟台市莱山区迎春大街飞龙天润大厦</view>
			<view class="mt24 flex_box aic">
				<view class="item ov">
					<view class="df aic">
						<view class="fs32 fwb cor_333">取件时间</view>
						<view class="ml10 fs28 cor_666">05-12（周一）</view>
						<view class="ml10 fs28 cor_F52">17:00</view>
					</view>
				</view>
				<image src="@/static/images/icon_arw_4.png" class="img_4"></image>
			</view>
		</view>
		
		<view class="mt24 area_order_1">
			<view class="pt40 pb40 bb1 flex_box aic">
				<view class="item ov"><view class="fs32 fwb cor_333 clamp_1">商品信息</view></view>
			</view>
			
			<view class="pt32 pb20">
				<view class="flex_box aic">
					<view class="re mr15 fs0"><image src="@/static/images/banner_01.png" class="shop_pic_size"></image></view>
					<view class="item ov">
						<view class="flex_box aic">
							<view class="item ov">
								<view class="fs28 cor_333 clamp_1">塞尔达 荒野之息</view>
							</view>
							<view class="fs32 cor_F52 ml10">¥ 238元</view>
						</view>
						<view class="mt15 flex_box aic">
							<view class="item ov">
								<view class="fs24 cor_999 clamp_1">裸卡简装，中文，非国行</view>
							</view>
							<view class="ml10 fs24 cor_999">X1</view>
						</view>
					</view>
				</view>
				
				<view class="re">
					
					<view class="mt40 flex_box aic">
						<view class="fs28 cor_333 mr10">快递费用</view>
						<view class="fs24 cor_999 item ov">点击修改抵扣金额</view>
						<view class="ml10 fs28 cor_333">0元</view>
					</view>
					
					<view class="mt40 flex_box aic">
						<view class="fs28 cor_333 mr10">优惠券抵扣</view>
						<view class="ml10 up_tag_1">券</view>
						<view class="ml10 fs24 cor_999 item ov">点击修改抵扣金额</view>
						<view class="ml10 fs28 cor_333">抵扣 -0元</view>
					</view>
					
					<view class="mt40 df jcfe fs28">
						<view class="cor_999">共1件商品，小计</view>
						<view class="ml10 cor_333">¥ 238元</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
		
		<view class="mt24 area_order_2">
			<view class="flex_box aic">
				<view class="item ov">
					<view class="fs28 cor_333">支付方式</view>
				</view>
				<view class="df aic">
					<image src="@/static/images/icon_wechat.png" class="" style="width: 33rpx; height: 29rpx;"></image>
					<view class="ml15 fs28 cor_999">微信支付</view>
				</view>
			</view>
		</view>
		
	</view>
	
	<view class="operate_bottom_fix">
		<view class="df aic jcfe">
			<view class="fs28 cor_F52">
				<text class="">合计</text>
				<text class="ml5 mr5 fwb" style="font-size: 52rpx;">238</text>
				<text class="">元</text>
			</view>
			<view class="ml35 order_btn">支付</view>
		</view>
		
	</view>
	
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	
</script>

<style lang="scss" scoped>
	
	page { background: #F6F6F6; }
	
	.confirm_order_page {
		position: relative;
		padding: 48rpx 24rpx calc(136rpx + content(safe-area-inset-bottom));
		padding: 48rpx 24rpx calc(136rpx + env(safe-area-inset-bottom));
		min-height: 100vh;
		background: linear-gradient(90deg, #FFEEEE 0%, #FFFFFF 90.99%);
		.area_order_1 {
			padding: 0 24rpx 48rpx;
			border-radius: 16rpx;
			background: linear-gradient(180deg, #FFEEEE 0%, #FFFFFF 70.99%);
			.tipe_btn {
				position: relative;
				padding: 0 16rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 24rpx;
				color: #fff;
				background: #343434;
				border-radius: 28rpx;
			}
		}
		.area_order_2 {
			position: relative;
			padding: 38rpx 32rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}
		
	}
	
	.shop_pic_size {
		width: 196rpx;
		height: 120rpx;
		border-radius: 12rpx;
	}
	
	.order_btn {
		position: relative;
		padding: 0 40rpx;
		min-width: 208rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background: #F5220F;
		border-radius: 44rpx;
	}
	
	.operate_bottom_fix {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 24rpx 32rpx calc(24rpx + content(safe-area-inset-bottom));
		padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 5;
	}

</style>
